<template>
  <section>
    <div style="position:relative"  @mouseenter="handleEnter" @mouseleave="handleLeave">
      <img :src="imgUrl" ref="img">
      <div class="flag" v-show="!flag">在此填充文字</div>
    </div>
    <p>{{text}}</p>
    <p>{{text2}}</p>
  </section>
</template>

<script>
export default {
    data(){
        return{
            flag:true
        }
    },
    props:{
        imgUrl:String,
        text:String,
        text2:String
    },
    methods:{
        handleEnter(){
            this.flag = false
            this.$refs.img.style.cssText = `transform: scale(1.2);
            transition: all linear 0.3s;`
        },
        handleLeave(){
            this.flag = true
            this.$refs.img.style.cssText=`transition: all linear 0.2s;`
        }
    }
}
</script>

<style scoped>
    div{
        width:100%;
        display:inline-flex;
        flex-direction: column;
        overflow: hidden;
        cursor:pointer;
    }
    img{
        width:100%;
        overflow: hidden;
        cursor: pointer;
        transition: all linear 0.2s;
    }
    p{
        width: 100%;
        /* text-align: center; */
    }
    .flag{
        position:absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(25, 25, 25, 0.5);
        color:white;
        padding: 30px;
        text-align: center;
    }
</style>